<template>
	<view>
		<!-- 轮播图 -->
		<view class="wrap">
			<u-swiper :list="swiperList" height="320" name="img_url"></u-swiper>
		</view>

		<!-- 导航栏 -->
		<view class="nav u-text-center u-m-t-20">
			<u-tabs :list="navList" :current="currentIndex" bar-width="100" item-width="160" @change="navChange">
			</u-tabs>
		</view>

		<!-- 内容区域 -->
		<view class="content u-skeleton">
			<u-row gutter="16">
				<u-col span="6" v-for="(item,index) in goodsList" :key="index">
					<goods-card :good="item"></goods-card>
				</u-col>
			</u-row>
		</view>
		
		<!-- 骨架屏 -->
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>

	</view>
</template>

<script>
	const db = uniCloud.database();
	export default {
		data() {
			return {
				swiperList: [
					
				], // 轮播图列表
				navList: [{
					name: '默认'
				}, {
					name: '销量'
				}, {
					name: '推荐'
				}, {
					name: '最新'
				}], // 导航栏数据
				currentIndex: 0, // 当前选中导航栏下标
				goodsList: [],// 商品列表
				page: 1,// 当前页
				loading: false,// 骨架屏的显示与隐藏
				orderBy:""
			}
		},
		onLoad() {
			this.getIndexData();
			this.getGoods();
		},
		onReachBottom() {
			// 重新拉去数据
			this.page += 1;
			this.getGoods();
		},
		methods: {
			// 获取首页数据、
			async getIndexData(){
				this.loading = true; // 显示骨架屏
				let params = {
					page: this.page
				}
				//获取轮播图数据
				db.collection("picture")
				.get()
				.then(res=>{
					for(let i=0;i<res.result.data.length;i++){
						this.swiperList.push(res.result.data[i].img)  
					}
				});
				this.loading = false; // 隐藏骨架屏

			},
			// 导航栏切换
			navChange(index) {
				this.currentIndex = index;
				if(!index) this.orderBy = "";
				if(index == 1) this.orderBy = "sales desc";
				if(index == 2) this.orderBy = "title desc";
				if(index == 3) this.orderBy = "price desc";
				console.log('---------',this.orderBy)
				// 清空数据列表
				this.goodsList = [];
				// 重置页数
				this.page = 1;
				// 请求数据
				this.getGoods();
				// this.getIndexData();
			},
			//获取商品
			getGoods(){
				db.collection("goods")
				.orderBy(this.orderBy)
				.skip((this.page-1)*4)
				.limit(4)
				.get()
				.then(res=>{
					if(res.result.data.length){
						console.log(res.result.data)
						this.goodsList = this.goodsList.concat(res.result.data);
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
